<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        /* 样式 */
        body {
            background-color: bisque;
        }

        #app {
            width: 400px;
            height: 200px;
            border: solid 1px black;
            margin: 100px auto;
            text-align: center;
            background-color: black;
        }

        .nameDiv {
            margin-top: 10px;
            font-size: 70px;
            font-family: '楷体';
            color: yellow;
        }

        button {
            margin-top: 10px;
        }

        img {
            width: 30px;
            height: 40px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="nameDiv">
            <img src="/images/kunkun.jpg" alt="" srcset="" id="avtar">
            <span id="name">xxx</span>
        </div>

        <div>
            <button onclick="begin()" id="beginBtn">--开始---</button>
            <button onclick="end()">--结束---</button>
        </div>
    </div>
    </div>

</body>
<script>
    //js逻辑  实现随机点名
    //简单初始化一些数据  维护多个学生的信息  -----> 数据库
    let studentArray = [
        { "id": 1, "name": "蔡徐坤", image: "/images/kunkun.jpg" },
        { "id": 2, "name": "凡凡", image: "/images/fanfan.png" },
        { "id": 3, "name": "峰峰", image: "/images/kunkun.jpg" },
        { "id": 4, "name": "王宝强", image: "/images/kunkun.jpg" },
        { "id": 5, "name": "陈冠希", image: "/images/kunkun.jpg" }
    ];
    let task;
    function begin() {
        //一直随机获得随机点名学生信息  展示页面上
        //js定时任务实现
        //setInterval('执行的任务逻辑(函数类型)','时间');
       task = setInterval( function () {
            //随机获得数组里面的一个对象----> 学生对象 name  image
            //获得数组里面的数据----> index-----> 随机索引----->0-(length-1)  0-4
            let randomNum = Math.random() * studentArray.length;//0-5
            let randomIndex = Math.floor(randomNum);
            let stuRandomObj = studentArray[randomIndex];
            document.getElementById("name").innerText = stuRandomObj.name;
            document.getElementById("avtar").src = stuRandomObj.image;
        }, 100);

        //避免出现点击多次开始按钮  产生多次定时任务  无法取消
        //将开始按钮设置为  禁用
        document.getElementById("beginBtn").disabled=true;
    }
    function end() {
        //结束当前定时任务-----> 随机点一个名字
        clearInterval(task);
        //设置开始按钮:  可用
        document.getElementById("beginBtn").disabled=false;
    }
</script>
</html>